<template>
  <div class="debugging">
    <el-button @click="Simulate" style="margin-left: 87%;">{{simulation}}</el-button>
    <div class="debugHead">
      <el-row>
        <el-col :span="5">
          <div class="debugTitle">名称</div>
        </el-col>
        <el-col :span="2">
          <div class="debugTitle">最小值</div>
        </el-col>
        <el-col :span="2">
          <div class="debugTitle">状态</div>
        </el-col>
        <el-col :span="13">
          <div class="debugTitle">速度</div>
        </el-col>
        <el-col :span="2">
          <div class="debugTitle">最大值</div>
        </el-col>
      </el-row>
    </div>
    <div
        class="debugCon"
        v-for="(item, key) in IKConfig"
        :key="key"
    >
      <!--      @click="handleClick(item, key)"-->

      <el-row>
        <el-col :span="5"
        >
          <div class="debugList">{{ key }}</div>
        </el-col
        >
        <el-col :span="3"
        >
          <div class="debugList">
            <el-input
                :disabled="item.locked"
                v-model="item.range[0]"
                style="width: 60px; margin-left: -1vw"
            />
          </div
          >
        </el-col>
        <el-col :span="1"
        >
          <div class="debugList">
            <img
                class="debugImg"
                src="@/assets/image/open.jpg"
                alt=""
                v-if="item.locked === false"
            />
            <img
                class="debugImg"
                src="@/assets/image/lock.jpg"
                alt=""
                v-if="item.locked === true"
            /></div
          >
        </el-col>
        <el-col :span="2"
        >
          <div class="debugList">
            <span>{{ item.range[0] }}</span>
          </div>
        </el-col
        >
        <el-col :span="9"
        >
          <div class="debugList">
            <el-slider
                v-model="values[key]"
                @change="change($event),changeKey(key)"
                :min="item.range[0]"
                :max="item.range[1]"
                style="margin-top: 1vh"
                :disabled="item.locked"
            />
          </div
          >
        </el-col>
        <el-col :span="1"
        >
          <div class="debugList">
            <span style="margin-left: 1vw">{{ item.range[1] }}</span>
          </div>
        </el-col
        >
        <el-col :span="3"
        >
          <div class="debugList">
            <el-input
                v-model="item.range[1]"
                :disabled="item.locked"
                style="width: 60px; margin-left: 2vw"
            />
          </div
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from "vue";
import IKConfig from "./IKConfig.json";
import IKJSON from "./IKJSON.json"
import {onMounted, ref, Ref} from "vue";
import SendToUnity from "@/tool/SendToUnity.ts";
import {MessageType} from "@/config/Declare.ts";
import Vector3 from "@/tool/Vector3";

interface SendData {
  name: string,
  value: Vector3
}

const values: Ref<{ [key: string]: number }> = ref({});
for (let v in IKConfig) {
  values.value[v] = 0;
}
const simulation = ref("模拟");
let Value: number = -1000;
let Key: string = null;
onMounted(()=>{
})
function change(value: number) {
  Value = Number(value);
  changeDown()
}

function changeKey(key: string) {
  Key = key;
  changeDown()
}

function changeDown() {
  if (Key != null && Value !== -1000) {
    values[Key] = Value
    let datas: Array<SendData> = []
    let obj: SendData = {
      name: Key,
      value: Vector3.NumberToVector3(Value, IKConfig[Key].axis)
    }
    datas.push(obj)
    SendToUnity.send({type: MessageType.setValue, data: datas})
    Key = null;
    Value = -1000;
  }
}
let simulateInterval:number;
const simulateTime:number = 1/30*1000
let cIndex = 0;
function Simulate() {
  if(simulation.value==="停止"){
    clearInterval(simulateInterval)
  }else {
    simulateInterval = setInterval(()=>{
      let datas: Array<SendData> = []
      for(let key in IKJSON){
        let value = IKJSON[key]
        let obj: SendData = {
          name: key,
          value: Vector3.NumberToVector3(value[cIndex], IKConfig[key].axis)
        }
        values.value[key] = value[cIndex]
        datas.push(obj)
      }
      cIndex++;
      cIndex=cIndex>=600?0:cIndex;
      SendToUnity.send({type: MessageType.setValue, data: datas})
    },simulateTime)
  }
  simulation.value=simulation.value==="模拟"?"停止":"模拟"
}

// const handleClick = (item, i) => {
//   console.log(item, i);
// };
</script>

<style lang="scss" scoped>
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  /* 关键代码 */
  background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.4) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0.4) 75%,
          transparent 75%,
          transparent
  );
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

.debugging {
  width: 40vw;
  height: 50vh;
  background: rgba(15, 20, 49, 0.5);
  position: absolute;
  color: #fff;
  overflow: auto;
  font-size: 1vw;

  .debugHead {
    width: 38vw;
    height: 5vh;

    .debugTitle {
      text-align: center;
      height: 5vh;
      line-height: 5vh;
    }
  }

  .debugCon {
    width: 38vw;
    height: 5vh;

    .debugList {
      text-align: center;
      height: 5vh;
      line-height: 5vh;

      .debugImg {
        width: 1.8vw;
        height: 3.6vh;
        margin-top: 1vh;
        margin-left: -1vw;
        cursor: pointer;
      }
    }
  }
}
</style>
